import React, {Component} from 'react'
import {Button, Col, DatePicker, Form, Input, Row, Space, Table} from 'antd'
import PaginationComponent from '../common/paginationComponent'

const {RangePicker} = DatePicker;

class LogManagement extends Component {
    state = {
        pageNumber: 1,
        pageSize: 10,
        totalRow: 0,
        dataSource: []
    }

    componentDidMount() {
        // this.getLogList();
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
        }
    }

    /*获取日志列表*/
    getLogList = () => {
        
    }

    /*分页操作事件*/
    pageChangeHandle = (pageNumber, pageSize) => {
        this.setState({pageNumber, pageSize}, () => {
            this.getLogList();
        });
    }

    /*重置查询条件*/
    resetFormHandle = () => {
        this.refs.filterRef.resetFields();
        this.getLogList();
    }

    render() {
        const {pageNumber, pageSize, totalRow, dataSource} = this.state;
        const pageProps = {
            pageNumber, pageSize, totalRow, pageChangeHandle: this.pageChangeHandle
        }
        const columns = [
            {title: '序号', dataIndex: 'key', key: 'key', align: 'center', width: 100},
            {title: '用户名', dataIndex: 'usersName', key: 'usersName', align: 'center', ellipsis: true},
            {title: '操作IP', dataIndex: 'operIp', key: 'operIp', align: 'center', ellipsis: true},
            {title: '操作内容', dataIndex: 'operate', key: 'operate', align: 'center'},
            {title: '操作时间', dataIndex: 'operateTime', key: 'operateTime', align: 'center'}
        ]
        const tableProps = {
            dataSource,
            columns,
            pagination: false
        }
        return (
            <>
                <div className="system_management_content_style animate__animated animate__fadeIn">
                    <Row className="filter_section">
                        <Col span={2} className="animate__animated animate__fadeInLeft">
                            <span className="filter_label">条件查询</span>
                        </Col>
                        <Col span={22} className="filter_search">
                            <Row className="custom_filter_form_style">
                                <Col span={18} className="animate__animated animate__fadeInDown">
                                    <Form ref="filterRef" layout="inline" autoComplete="off"
                                          initialValues={{userName: '', time: ''}}>
                                        <Form.Item label="用户名" name="userName">
                                            <Input placeholder="用户名" autocomplate="off"/>
                                        </Form.Item>
                                        <Form.Item label="操作时间" name="time">
                                            <RangePicker/>
                                        </Form.Item>
                                    </Form>
                                </Col>
                                <Col span={6} className="clearFix animate__animated animate__fadeInRight">
                                    <Space size={30} className="float-right">
                                        <Button type="primary" className="custom_button_style search_result"
                                                onClick={this.getLogList}>搜索</Button>
                                        <Button type="primary" className="custom_button_style"
                                                onClick={this.resetFormHandle}>重置</Button>
                                    </Space>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row className="filter_section">
                        <Col span={24} className="animate__animated animate__fadeInLeft">
                            <span className="filter_label">日志列表</span>
                        </Col>
                    </Row>
                    <div className="table_box animateFadeInUp">
                        <Table className="custom_table_style" {...tableProps}/>
                        <PaginationComponent {...pageProps}/>
                    </div>
                </div>
            </>
        )
    }
}

export default LogManagement